<!DOCTYPE html>
<html>
<head>
    <title>Data binding</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div data-role="view" id="flat" data-init="mobileListViewDataBindInitFlat" data-title="ListView" data-layout="databinding">
    <ul id="flat-listview"></ul>
</div>

<div data-role="view" id="grouped" data-init="mobileListViewDataBindInitGrouped" data-transition="" data-title="ListView" data-layout="databinding">
     <ul id="grouped-listview"></ul>
</div>

<div data-role="layout" data-id="databinding">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
        </div>
    </header>

    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="#flat" data-icon="stop">Flat
            </a><a href="#grouped" data-icon="organize">Grouped</a>
        </div>
    </div>
</div>

<script>
    var groupedData = [
        {name: "Sashimi salad", letter: "S" },
        {name: "Chirashi sushi", letter: "C" },
        {name: "Seaweed salad", letter: "S" },
        {name: "Edamame", letter: "E" },
        {name: "Miso soup", letter: "M" },
        {name: "Maguro", letter: "M" },
        {name: "Shake", letter: "S" },
        {name: "Shiromi", letter: "S" },
        {name: "Tekka maki", letter: "T" },
        {name: "Hosomaki Mix", letter: "H" },
        {name: "California rolls", letter: "C" },
        {name: "Seattle rolls", letter: "S" },
        {name: "Spicy Tuna rolls", letter: "S" },
        {name: "Ebi rolls", letter: "E" },
        {name: "Chicken Teriyaki", letter: "C" },
        {name: "Salmon Teriyaki", letter: "S" },
        {name: "Gohan", letter: "G" },
        {name: "Tori Katsu", letter: "T" },
        {name: "Yaki Udon", letter: "Y" }
    ];


    var flatData = [ "Sashimi salad", "Chirashi sushi", "Seaweed salad", "Edamame", "Miso soup", "Maguro", "Shake", "Shiromi", "Tekka maki", "Hosomaki Mix", "California rolls", "Seattle rolls", "Spicy Tuna rolls", "Ebi rolls", "Chicken Teriyaki", "Salmon Teriyaki", "Gohan", "Tori Katsu", "Yaki Udon" ];

    function mobileListViewDataBindInitFlat() {
        $("#flat-listview").kendoMobileListView({ dataSource: flatData });
    }

    function mobileListViewDataBindInitGrouped() {
        $("#grouped-listview").kendoMobileListView({
            dataSource: kendo.data.DataSource.create({data: groupedData, group: "letter"}),
            template: "${name}",
            fixedHeaders: true
        });
    }
</script>


    
    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
    
    
</body>
</html>
